import Taro, { Component, Config } from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import '@/styles/common/coupon-one.scss'
import './index.scss'
import { formatTime } from "@/utils/utils"
import { getCouponPage, addCoupon } from '@/api/userApi'
import couponImg from "@/assets/icon/my_coupon.png"
import couponActiveImg from "@/assets/icon/my_coupon_active.png"
import { Loading, LoadMore, ListEmpty } from '@/components/index'

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '领取优惠券'
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      page: 1,
      limit: 10,
      loadStatus: 'loading',
      couponList: []
    }
  }

  componentWillMount() {
    this.getPage()
  }

  //  分页获取优惠券
  getPage() {
    const { page, limit, couponList, loadStatus } = this.state
    if (loadStatus === 'noMore') {
      return
    }
    getCouponPage({ page, limit }).then(res => {
      const { list, totalCount } = res.data
      const arr = list.map(i => {
        const t = i.template || {}
        return {
          id: i.id,
          title: t.title,
          status: i.status,
          amount: t.amount,
          totime: i.totime,
          fromtime: i.fromtime,
          isPermanent: i.isPermanent
        }
      })

      this.setState({
        page: page+1,
        couponList: page===1 ? arr : couponList.concat(arr),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  领取优惠券
  addCoupon(i, k) {
    const { couponList } = this.state
    wx.showLoading({ title: '加载中', mask: true })
    addCoupon({ couponId: i.id }).then(() => {
      i.status = -1
      couponList[k] = i
      this.setState({
        couponList
      }, () => {
        wx.hideLoading()
      })
    })
  }

  render() {
    const { loading, couponList, loadStatus } = this.state
    return (<View className='page d-f f-d-c'>
      {loading && <Loading isCover/>}
      <View className='coupon-list'>
        {couponList.map((coupon, k) => {
          return (<View key={coupon.id} className='coupon-item coupon-one'>
            <View className='coupon-left'>
              {coupon.status !== 1 && <Image src={couponImg} className='coupon-img'/>}
              {coupon.status === 1 && <Image src={couponActiveImg} className='coupon-img'/>}
              <View className='coupon-price bnn-number d-f a-i-b'>
                <View className='price-unit'>￥</View>{coupon.amount}
              </View>
            </View>
            <View className='coupon-right'>
              <View className='coupon-top thin-border__b f-g-4'>
                <View className='coupon-name t-o-e-2'>{coupon.title}</View>
              </View>
              <View className='coupon-bottom d-f a-i-c j-c-b'>
                {coupon.isPermanent ? (
                  <View className='coupon-time'>不限时间，长期有效</View>
                ) : (
                  <View className='coupon-time'>{formatTime(coupon.fromtime, 'YY/MM/DD')}-{formatTime(coupon.totime, 'YY/MM/DD')}</View>
                )}
                {coupon.status !== 1 && <View className='coupon-btn f-g-5 disabled'>已领取</View>}
                {coupon.status === 1 && <View className='coupon-btn f-g-5' hoverClass='hover-class--btn' onClick={this.addCoupon.bind(this, coupon, k)}>立即领取</View>}
              </View>
            </View>
          </View>)
        })}
      </View>

      {!couponList.length && loadStatus == 'noMore' ? (<ListEmpty/>) : (<LoadMore status={loadStatus}/>)}
    </View>)
  }
}
